/**
 * 注册路由组件
 */
import React, { Component } from 'react'
import {
  NavBar,
  WingBlank,
  List,
  InputItem,
  WhiteSpace,
  Radio,
  Button,
  Toast
} from 'antd-mobile'

import { connect } from 'react-redux'
import { register } from '../../redux/actions'

import Logo from '../../components/logo/logo'
const ListItem = List.Item

class Register extends Component {
  state = {
    username: '',   //用户名
    password: '',   //密码
    password2: '',  //确认密码
    type: 'laoban'        //用户类型名称    dashen/laoban
  }
  register = async () => {
    await this.props.register(this.state)
    const {msg, redirectTo} = this.props.user
    console.log(this.props.user);
    if (msg) {
      Toast.info(msg)
    }
    if (redirectTo) {
      this.props.history.replace(redirectTo);
      Toast.info('注册成功')
    }
  

  }
  toLogin = () => {
    this.props.history.replace('/login')
  }

  render() {
    const { type } = this.state
    return (
      <div>
        <NavBar type="primary">格&nbsp;雷&nbsp;招&nbsp;聘</NavBar>
        <div className="d-flex flex-colum jc-around" style={{ height: '600px' }}>
          <Logo></Logo>
          <WingBlank>
            <List>
              <WhiteSpace />
              <InputItem onChange={val => this.setState({ username: val })} placeholder='请输入用户名'>用户名：</InputItem>
              <InputItem onChange={val => this.setState({ password: val })} type='password' placeholder='请输入密码'>密&nbsp;&nbsp;&nbsp;码：</InputItem>
              <InputItem onChange={val => this.setState({ password2: val })} type='password' placeholder='请确认密码'>确认密码：</InputItem>
              <WhiteSpace />
              <ListItem>
                <span>用户类型:</span>
                &nbsp;&nbsp;&nbsp;
                <Radio checked={type === 'dashen'} onChange={() => this.setState({ type: 'dashen' })}>大神</Radio>
                &nbsp;&nbsp;
                <Radio checked={type === 'laoban'} onChange={() => this.setState({ type: 'laoban' })}>老板</Radio>
              </ListItem>
              <Button type="primary" onClick={this.register}>注&nbsp;&nbsp;&nbsp;册</Button>
              <Button onClick={this.toLogin}>已有账户</Button>
            </List>
          </WingBlank>
        </div>
      </div>
    )
  }
}
export default connect(
  state => ({ user: state.user }),
  { register }
)(Register)